const li = document.querySelector('.list li');
const listico = document.querySelectorAll('.ico ul li');

let left = 0;
let timer;

function run() {
    if (-left >= 1024) {
        left = 0;
    }
    left -= 16;
    li.style.marginLeft = left + 'px';
    let n = (left % 256 == 0) ? 2000 : 10;
    let m = Math.floor(-left / 256);
    if(m === 4) {
        m = 0;
    }
    timer = setTimeout(run, n);
    changeico(m);
}
run();

for (let i = 0; i < listico.length; i++) {
    listico[i].addEventListener('click', function () {
        for (let j = 0; j < listico.length; j++) {
            listico[j].classList.remove('active');
        }
        this.classList.add('active');
        changeimg(i);
    })
}

function changeico(n) {
    for (let i = 0; i < listico.length; i++) {
        listico[i].classList.remove('active');
    }
    listico[n].classList.add('active');
}

function changeimg(n) {
    let m = n * 256;
    li.style.marginLeft = -m + 'px';
    left = -m;
}